<template>
	<view class="pages">
		<view class="top">
			<view>负责人</view>
			<view>
				<input class="input" :placeholder="List.name" @input="handleInput1"/>
			</view>
		</view>
		<view class="top">
			<view>身份证号码</view>
			<view>
				<input class="input" :placeholder="List.number" @input="handleInput2"/>
			</view>
		</view>
		<view class="top">
			<view>手机号</view>
			<view>
				<input class="input" :placeholder="List.phone" @input="handleInput3" />
			</view>
		</view>
		<view class="top">
			<view>验证码</view>
			<view class="code">
				 <input class="popup-content-input"  placeholder="输入验证码" @input="handleInput4"/>
				<view class="send" @click="handleSend">{{ time ? time + 's' : '获取验证码'}}</view>
			</view>
		</view>
		<view class="top">
			<view>店名</view>
			<view>
				<input class="input" :placeholder="List.shopName" @input="handleInput5"/>
			</view>
		</view>
		<view class="top">
			<view>工商营业执照号码</view>
			<view>
				<input class="input" :placeholder="List.shopNumber" @input="handleInput6"/>
			</view>
		</view>
		<view class="top">
			<view>经营区域</view>
			<view>
				<uni-data-select v-model="List.area" :localdata="range" @change="change" :clear="false"
					style="width: 100%; height: 100%; margin-left: -6px;"></uni-data-select>
			</view>
		</view>
		<view class="top">
			<view>地址</view>
			<view>
				<input class="input" :placeholder="List.address" @input="handleInput8"/>
			</view>
		</view>


		<view class="introduce">商家介绍 :</view>
		<uni-easyinput type="textarea" v-model="List.introduce" placeholder="请输入内容" style="width: 324px;
		height: 85px;
		margin-left: 25px;
		margin-top: 5px;
		color: rgba(136,136,136,1);"></uni-easyinput>


		<view class="introduce">营业执照 :</view>
		<view class="upload">
			<image :src="List.pictrue1" class="pic"></image>
			<uni-file-picker limit="1" @change="handleFileChange1" style="position: absolute; top: 520px; left: 117px;"></uni-file-picker>
		</view>
		
		
		<view class="introduce">门面照片 :</view>
		<view class="upload">
			<image :src="List.pictrue2" class="pic"></image>
			<uni-file-picker limit="1" style="position: absolute; top: 635px; left: 117px;"></uni-file-picker>
		</view>
		
		
		<view class="introduce">身份证正反面 :</view>
		<view class="upload">
			<view>
				<image :src="List.pictrue3" class="pic"></image>
				<image :src="List.pictrue4" class="picRight"></image>
			</view>
			<uni-file-picker limit="2" style="position: absolute; top: 750px; left: 212px;"></uni-file-picker>
		</view>
		
		
		<navigator class="btn" url="/pages/business/business">保存</navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				_id: "", //发送成功验证码标识
				                phone: this.phone, //需发送验证码的目标邮箱
				                code: "", //验证码
				                capacity: 6, //验证码位数（1-8位），默认：6位
				                time: 0,
				range: [{
						value: 0,
						text: "郑州市中原区"
					},
					{
						value: 1,
						text: "郑州市高新技术区"
					},
				],
				List: {
				    "name": "郑商所",
				    "number": "412032654123654123",
					"phone": "15253654521",
					"shopName": "店小友",
					"shopNumber": "454515442115422212255",
					"area": 0,
					"address": "山阳区迎宾路32号",
					"introduce": "商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍",
					"pictrue1": "/static/bg.png",
					"pictrue2": "/static/bg.png",
					"pictrue3": "/static/bg.png",
					"pictrue4": "/static/bg.png",
				  },
				  name:'',
				  number:'',
				  phone:'',
				  code: '',
				  shopName:'',
				  shopNumber:'',
				  area:'',
				  address:'',
				  introduce:'',
				  pictrue1: "",
				  pictrue2: "",
				  pictrue3: "",
				  pictrue4: "",
			}
		},
		methods: {
			// 输入框改变
			handleInput1 :function(e){
				console.log(e.detail.value)
				this.name = e.detail.value
			},
			handleInput2 :function(e){
				console.log(e.detail.value)
				this.number = e.detail.value
			},
			handleInput3 :function(e){
				console.log(e.detail.value)
				this.phone = e.detail.value
			},
			handleInput4 :function(e){
				console.log(e.detail.value)
				this.code = e.detail.value
			},
			handleInput5 :function(e){
				console.log(e.detail.value)
				this.shopName = e.detail.value
			},
			handleInput6 :function(e){
				console.log(e.detail.value)
				this.shopNumber = e.detail.value
			},
			change(e) {
				console.log("e:", e);
				this.area = e
			},
			handleInput8 :function(e){
				console.log(e.detail.value)
				this.address = e.detail.value
			},
			handleIntroduceChange(newValue) {  
			      // 输出新值到控制台  
			      console.log('New value of List.introduce:', newValue);  
				  this.introduce = newValue
			      // 这里可以添加更多的逻辑来处理newValue  
			    },  
				
				// 文件上传
				handleFileChange1(e) {  
				      // e.detail 可能包含文件信息，具体取决于 <uni-file-picker> 的实现  
				      // 假设 e.detail.files 是一个包含文件信息的数组  
				      const file = e.detail.files[0]; // 用户选择的第一个文件  
				  
				      // 在这里，你可以调用一个函数来上传文件  
				      this.uploadFile(file);  
				    }, 
				 uploadFile(file) {  
				      // 使用uni.uploadFile或其他API将文件上传到服务器  
				      // 这里只是一个示例，你需要根据自己的API进行调整  
				      uni.uploadFile({  
				        url: '你的上传接口URL', // 仅为示例，请替换为实际URL  
				        filePath: file.path, // 文件路径  
				        name: 'file', // 后台接收的文件参数名  
				        formData: {  
				          'user': 'test' // 其他需要一起上传的参数  
				        },  
				        success: (uploadFileRes) => {  
				          // 上传成功处理  
				          console.log('uploadFileRes:', uploadFileRes);  
				        },  
				        fail: (err) => {  
				          // 上传失败处理  
				          console.error(err);  
				        }  
				      });  
				    },
			/**
			             * 发送验证码
			             */
			            async handleSend() {
			                const reg = /^1[3-9]\d{9}$/;
			                if (!reg.test(this.phone)) {
			                    uni.showToast({
			                        title: '请输入正确的手机号',
			                        icon: 'none'
			                    })
			                    return
			                }else{
								// 输入正确手机号并且发送验证码
								uni.showToast({
								    title: '发送成功请及时查看手机接收验证码',
								    icon: 'none'
								})
							}
			                if (this.time == 0) {
			                    this.time = 10
			                    const t = setInterval(() => {
			                        this.time = this.time - 1
			                        if(this.time == 0) clearInterval(t)
			                    }, 1000)
			                    
			                } else return
			            },
			
		},
		 watch: {  
		    // 监听List.introduce的变化  
		    'List.introduce'(newValue) {  
		      // 调用一个方法来处理变化  
		      this.handleIntroduceChange(newValue);  
		    },  
		  },
	}
</script>

<style>
	.pages {
		width: 375px;
		height: 900px;
		background-color: rgba(255, 255, 255, 1);
	}

	.top {
		width: 324px;
		height: 44px;
		display: flex;
		margin-left: 18px;
		line-height: 44px;
		font-size: 14px;
		border-bottom: 1rpx solid #EBEBEB;
	}

	.top view:nth-child(1) {
		width: 130px;
		height: 44px;
		padding-left: 5px;

	}

	.top view:nth-child(2) {
		width: 198px;
		height: 44px;
		padding-left: 5px;
	}
	.popup-content-input{
		width: 90px;
		height: 100%;
	}
	.send{
		position: absolute;
		top: 136px;
		left: 250px;
		width: 50px;
	}
	.introduce {
		margin-top: 12px;
		margin-left: 23px;
		font-size: 15px;
		color: rgba(16, 16, 16, 1);
	}

	.introduceDetail {
		width: 324px;
		height: 73px;
		margin-left: 25px;
		margin-top: 5px;
	}

	.pic {
		width: 80px;
		height: 80px;
		background-color: rgba(229, 229, 229, 1);
		margin-left: 25px;
		margin-top: 2px;
	}

	.picRight {
		width: 80px;
		height: 80px;
		background-color: rgba(229, 229, 229, 1);
		margin-left: 15px;
		margin-top: 2px;
	}

	.btn {
		margin-top: 15px;
		margin-left: 35px;
		width: 300px;
		height: 38px;
		line-height: 38px;
		border-radius: 4px;
		background-color: rgba(29, 111, 255, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 14px;
		text-align: center;
		font-family: Roboto;
	}

	.input {
		width: 100%;
		height: 100%;
	}
	.upload{
		display: flex;
		width: 324px;
		height: 81px;
		 box-sizing: border-box;
	}
	.uni-file-picker{
		width:  260px;
		height: 260px
	}

</style>